<template>
  <!--  -->
  <!-- 文件预览：excel文档预览） -->
  <!--  -->
  <!-- v-html: 加载代码 -->
  <div class="table-info" v-html="excelContent"></div>
</template>

<script setup>
import * as XLSX from "xlsx";     //excel插件，依赖下载在package.json第32行
import { ref, reactive, getCurrentInstance, onMounted, computed, onUnmounted } from "vue";
const { proxy } = getCurrentInstance();

const props = defineProps({
    url: {
        type: String,
    },
});

const excelContent = ref();

//Excel文件加载器
const initExcel = async () => {
    let result = await proxy.Request({
        url: props.url,
        responseType: "arraybuffer",   // //响应数据以流的形式返回，不是json
    });
    if (!result) {
        return;
    }
    let workbook = XLSX.read(new Uint8Array(result), {type:"array"});
    var worksheet = workbook.Sheets[workbook.SheetNames[0]];
    excelContent.value = XLSX.utils.sheet_to_html(worksheet);  //生成一个html的table
}

//初始化
onMounted(() => {
    initExcel();
})

</script>

<style lang="scss" scoped>
.table-info {
    width: 100%;
    padding: 10px;
    :deep table {
        width: 100%;
        border-collapse: collapse;
        td {
            border: 1px solid #ddd;
            border-collapse: collapse;
            padding: 5px;
            height: 30px;
            min-width: 50px;
        }
    }
}

</style>